<template>
  <div class="page-contact-talk">
    <Navbar title="发送消息" />
    <div ref="refContent" class="content">
      <MsgItem v-for="item in msgList" :key="item.id" :item="item" :receiver="contactId" />
      <van-empty v-if="!msgList.length" description="没有消息" />
    </div>
    <div class="operation-bar">
      <div class="input-area">
        <div class="input-wrapper">
          <input v-model="inputText" placeholder="点击输入文字" />
          <div class="generate-report" @click="sendMsg">发送</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/store'
import ContactServe from '@/api/contact.ts'
import Navbar from '@/components/Navbar/index.vue'
import MsgItem from './comp/msgItem.vue'
import { showToast } from 'vant'

const userStore = useUserStore()

const inputText = ref<string>('')
const msgList = ref<IMessage[]>([])

const route = useRoute()
const contactId = ref(route.query.id as string)
const contactInitial = ref(route.query.initial as string)
const myInitial = userStore.userName.slice(0, 1)
const refContent = ref<NullAble<HTMLElement>>(null)

//预警指标发消息时携带注意语句
if(route.query.anomalyTips){
  inputText.value = route.query.anomalyTips
}

const fetchMsgList = () => {
  ContactServe.msgList({
    id: contactId.value
  }).then(({ code, data }) => {
    if (code == 0) {
      ContactServe.updateUnreadInfo({
        sendId: contactId.value
      })
      msgList.value = data.map(d => {
        return {
          ...d,
          initial: d.receiverId == contactId.value ? myInitial : contactInitial
        }
      })

      setTimeout(() => {
        if (refContent.value) {
          refContent.value.scrollTop = refContent.value.scrollHeight
        }
      }, 0)
    }
  })
}
let pullTimer: number | null = null
onMounted(() => {
  fetchMsgList()
  pullTimer = window.setInterval(() => {
    fetchMsgList()
  }, 10 * 1000)
})

onUnmounted(() => {
  if (pullTimer) {
    window.clearInterval(pullTimer)
    pullTimer = null
  }
})

const sendMsg = () => {
  if (!inputText.value) return showToast('消息不能为空')
  ContactServe.sendMsg({
    content: inputText.value,
    receiverId: contactId.value
  }).then(({ code }) => {
    // if (code == 0) {
    fetchMsgList()
    // }
  })
  inputText.value = ''
}
</script>

<style lang="less" scoped>
.page-contact-talk {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;

  .content {
    position: relative;
    flex-grow: 1;
    background: #f4f8fb;
    overflow-y: scroll;
    padding: 12px 12px 0px 12px;
  }

  .operation-bar {
    background-color: #edf5ff;
    padding: 12px;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    height: 79.5px;
    > div {
      flex-shrink: 0;
    }

    .input-area {
      flex-grow: 1;
      height: 36px;
      padding: 0px 10px;
      display: flex;

      .input-wrapper {
        display: flex;
        width: 100%;
        background: #fff;
        border-radius: 7.5px;
      }
      button {
        user-select: none;
      }
      input {
        width: 0;
      }

      input,
      button {
        outline: none;
        border: none;
        background-color: #fff;
        border-radius: 7.5px;
        flex-grow: 1;
        padding: 0px 10px;
      }

      .generate-report {
        width: 84px;
        background: #3a75c5;
        color: #fff;
        height: 36px;
        border-radius: 7.5px;
        line-height: 36px;
        text-align: center;
      }
    }
  }
}
</style>
